<template>
  <div id="box">
    <div class="header">
      <Form ref="search" :model="search" inline :label-width="80">
        <FormItem prop="name" label="奖品名称" style="width: 250px">
          <Input v-model="search.name" placeholder="输入奖品名称" style="width: 180px"/>
        </FormItem>
        <FormItem prop="prize" label="奖品类型:" style="width: 250px">
          <Select v-model="search.prize" style="width: 180px" placeholder="不限">
            <Option v-for="(item,index) in giftList" :key="item.index" :value="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="game" label="游戏类型:" style="width: 250px">
          <Select v-model="search.game" style="width: 180px" placeholder="不限">
            <Option v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="month" label="所属月份:" style="width: 250px">
          <DatePicker type="month" v-model="search.month" format="yyyy-MM" placeholder="选择月份" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searching('search')" style="margin-right: 25px;">查询</Button>
          <Button type="success" @click="add=true" style="margin-right: 25px;">新增</Button>
          <Button type="default" @click="clear('search')">重置</Button>
        </FormItem>
      </Form>
    </div>
    <div class="center">
      <Table stripe :columns="lvColumns" :data="lvData" :loading="loading"></Table>
      <Modal v-model="add" wdith="800" title="新增奖品" :closable="false" :mask-closable="false">
        <Form ref="adding" :model="adding" :label-width="120" :rules="addRules">
          <FormItem prop="name" label="奖品名称:" style="width: 250px">
            <Input v-model="adding.name" placeholder="奖品名称" style="width: 200px"/>
          </FormItem>
          <FormItem prop="prize" label="奖品类型:" style="width: 250px">
            <Select v-model="adding.prize" style="width: 200px" @on-change="changeShow">
              <Option v-for="(item,index) in giftList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="game" label="游戏类型:" style="width: 250px">
            <Select v-model="adding.game" style="width: 200px">
              <Option v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="cust" label="用户级别:" style="width: 250px">
            <Select v-model="adding.cust" style="width: 200px">
              <Option v-for="(item,index) in custList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="grade" label="奖品显示顺序  :" style="width: 250px">
            <Input v-model="adding.grade" placeholder="奖品显示顺序  " style="width: 200px"/>
          </FormItem>
          <FormItem prop="level" label="兑换条件:" style="width: 250px">
            <Poptip trigger="focus"  content="填写的数字与图片上的数字一致！" placement="top">
              <Input v-model="adding.level" placeholder="兑换条件" style="width: 200px"/>
            </Poptip>
          </FormItem>
          <template v-if="show">
            <FormItem prop="number" label="券码:" style="width: 250px">
              <Input v-model="adding.number" placeholder="券码" style="width: 200px"/>
            </FormItem>
          </template>
          <template v-if="hide">
            <FormItem prop="score" label="分值:" style="width: 250px">
              <Input v-model="adding.score" placeholder="分值" style="width: 200px"/>
            </FormItem>
          </template>
          <FormItem prop="month" label="所属月份:" style="width: 250px">
            <DatePicker type="month" v-model="adding.month" format="yyyy-MM" placeholder="选择月份" style="width: 200px"
                        @on-change="getTime"></DatePicker>
          </FormItem>
          <FormItem prop="status" label="状态:" style="width: 250px">
            <Select v-model="adding.status" style="width: 200px">
              <Option v-for="(item,index) in statusList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="icon" label="奖品图片:" style="width: 250px;">
            <template v-if="showing">
              <img :src="picUrl" style="width: 80px;height: 80px;">
            </template>
            <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="adding.icon" style="display: none"/>
          </FormItem>
          <FormItem prop="backpack" label="背包图片:" style="width: 250px;">
            <template v-if="look">
              <img :src="backUrl" style="width: 80px;height: 80px;">
            </template>
            <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess1"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="adding.backpack" style="display: none"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="addCancel('adding')">取消</Button>
          <Button type="primary" @click="addConfrim('adding')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modify" wdith="800" title="修改奖品" :closable="false" :mask-closable="false">
        <Form ref="modifying" :model="modifying" :label-width="120" :rules="modifyRules">
          <FormItem prop="name" label="奖品名称:" style="width: 250px">
            <Input v-model="modifying.name" placeholder="奖品名称" style="width: 200px"/>
          </FormItem>
          <FormItem prop="prize" label="奖品类型:" style="width: 250px">
            <Select v-model="modifying.prize" style="width: 200px" @on-change="changeShow">
              <Option v-for="(item,index) in giftList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="game" label="游戏类型:" style="width: 250px">
            <Select v-model="modifying.game" style="width: 200px">
              <Option v-for="(item,index) in gameList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="cust" label="用户级别:" style="width: 250px">
            <Select v-model="modifying.cust" style="width: 200px">
              <Option v-for="(item,index) in custList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="grade" label="奖品显示顺序  :" style="width: 250px">
            <Input v-model="modifying.grade" placeholder="奖品显示顺序  " style="width: 200px"/>
          </FormItem>
          <FormItem prop="level" label="兑换条件:" style="width: 250px">
            <Poptip trigger="focus"  content="填写的数字与图片上的数字一致！" placement="top">
              <Input v-model="modifying.level" placeholder="兑换条件" style="width: 200px"/>
            </Poptip>
          </FormItem>
          <template v-if="show">
            <FormItem prop="number" label="券码:" style="width: 250px">
              <Input v-model="modifying.number" placeholder="券码" style="width: 200px"/>
            </FormItem>
          </template>
          <template v-if="hide">
            <FormItem prop="score" label="分值:" style="width: 250px">
              <Input v-model="modifying.score" placeholder="分值" style="width: 200px"/>
            </FormItem>
          </template>
          <FormItem prop="month" label="所属月份:" style="width: 250px">
            <DatePicker type="month" v-model="modifying.month" format="yyyy-MM" placeholder="选择月份"
                        style="width: 200px" readonly></DatePicker>
          </FormItem>
          <FormItem prop="status" label="状态:" style="width: 250px">
            <Select v-model="modifying.status" style="width: 200px">
              <Option v-for="(item,index) in statusList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="icon" label="奖品图片:" style="width: 250px">
            <template v-if="showing">
              <img :src="picUrl" style="width: 80px;height: 80px;">
            </template>
            <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="modifying.icon" style="display: none"/>
          </FormItem>
          <FormItem prop="backpack" label="背包图片:" style="width: 250px;">
            <template v-if="look">
              <img :src="backUrl" style="width: 80px;height: 80px;">
            </template>
            <Upload
              :action="uploadURL"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess1"
            >
              <Button icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
            <Input v-model="modifying.backpack" style="display: none"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="changeCancel('modifying')">取消</Button>
          <Button type="primary" @click="changeConfrim('modifying')" :loading="addload">确定</Button>
        </div>
      </Modal>
    </div>
    <div class="footer">
      <Page :total="total" :page-size="pageSize" :current="step" style="margin-top: 30px" show-total
            @on-change="getData"/>
    </div>
  </div>
</template>

<script>
  const G=window.g;
  let url=G.url;
  export default {
    name: "gift",
    data() {
      return {
        uploadURL: url + '/file/upload/',
        search: {
          game: '',
          name: '',
          prize: '',
          month:'',
        },
        gameList: [
          {
            label: '签到',
            value: 0,
          },
          {
            label: '累积消费',
            value: 1,
          }
        ],
        giftList: [
          {
            label: '积分',
            value: 1,
          },
          {
            label: '优惠券',
            value: 0,
          }
        ],
        custList: [
          {
            label: '集享',
            value: 0,
          },
          {
            label: '尊享',
            value: 1,
          },
        ],
        statusList:[
          {
            label: '启用',
            value: 0,
          },
          {
            label: '停用',
            value: 1,
          },
        ],
        lvColumns: [
          {
            title: '数据ID',
            align: 'center',
            key: 'id'
          },
          {
            title: '奖品名称',
            align: 'center',
            key: 'name'
          },
          {
            title: '奖品类型',
            align: 'center',
            key: 'prizeType',
            render: (h, params) => {
              let txt = "";
              if (params.row.prizeType == 1) {
                txt = "积分"
              } else if (params.row.prizeType == 0) {
                txt = "优惠券"
              }
              return h('div', txt);
            }
          },
          {
            title: '用户级别',
            align: 'center',
            key: 'custType',
            render: (h, params) => {
              let txt = "";
              if (params.row.custType == 1) {
                txt = "尊享"
              } else if (params.row.custType == 0) {
                txt = "集享"
              }
              return h('div', txt);
            }
          },
          {
            title: '奖品显示顺序 ',
            align: 'center',
            key: 'level'
          },
          {
            title: '兑换条件',
            align: 'center',
            key: 'amount',
            render: (h, params) => {
              let txt = "";
              if (params.row.gameType == 1) {
                txt = params.row.amount + "元"
              } else if (params.row.gameType == 0) {
                txt = params.row.amount + "次"
              }
              return h('div', txt);
            }
          },
          {
            title: '券码/分值',
            align: 'center',
            key: 'prizeCode'
          },
          {
            title: '所属月份',
            align: 'center',
            key: 'prizeMonth'
          },
          {
            title: '游戏类型',
            align: 'center',
            key: 'gameType',
            render: (h, params) => {
              let txt = "";
              if (params.row.gameType == 0) {
                txt = "签到"
              } else if (params.row.gameType == 1) {
                txt = "累计消费"
              }
              return h('div', txt);
            }
          },
          {
            title: '状态',
            align: 'center',
            key: 'status',
            render: (h, params) => {
              let txt = "";
              if (params.row.status == 0) {
                txt = "启用"
              } else if (params.row.status == 1) {
                txt = "停用"
              }
              return h('span', {
                style: {
                  color: (params.row.status == 0) ? "green" : 'red'
                }
              }, txt)
            }
          },
          {
            title: '奖品图片',
            align: 'center',
            key: 'imgShow',
            render: (h, params) => {
              return h('div', {
                attrs: {
                  style: 'width: 80px;height:80px;'
                },
              }, [
                h('img', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  attrs: {
                    src: params.row.imgShow,
                    style: 'width: 80px;height: 80px;border-radius: 2px;margin-left:30px'
                  },
                })
              ])
            }
          },
          {
            title: '背包图片',
            align: 'center',
            key: 'imgPackage',
            render: (h, params) => {
              return h('div', {
                attrs: {
                  style: 'width: 80px;height:80px;'
                },
              }, [
                h('img', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  attrs: {
                    src: params.row.imgPackage,
                    style: 'width: 80px;height: 80px;border-radius: 2px;margin-left:30px'
                  },
                })
              ])
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.change(params.index)
                    }
                  }
                }, '修改'),
              ])
            }
          },

        ],
        lvData: [],
        total: 0,
        pageSize: 10,
        step: 1,
        add: false,
        adding: {
          name: '',
          prize: '',
          game: '',
          level: '',
          number: '',
          month: '',
          icon: '',
          score: '',
          cust: '',
          grade: '',
          backpack:'',
          status:0,
        },
        addRules: {
          name: [
            {required: true, message: '奖品名称不能为空', trigger: 'blur'}
          ],
          prize: [
            {required: true, message: '奖品类型不能为空', trigger: 'change', type: 'number'}
          ],
          game: [
            {required: true, message: '游戏类型不能为空', trigger: 'change', type: 'number'}
          ],
          cust: [
            {required: true, message: '用户级别不能为空', trigger: 'change', type: 'number'},
          ],
          status:[
            {required: true, message: '状态不能为空', trigger: 'change', type: 'number'},
          ],
          level: [
            {required: true, message: '兑换条件不能为空', trigger: 'blur'},
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '兑换条件只能为整数', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '奖品显示顺序不能为空', trigger: 'blur'},
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '奖品显示顺序只能为整数', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '券码不能为空', trigger: 'blur'}
          ],
          score: [
            {required: true, message: '分值不能为空', trigger: 'blur'}
          ],
          month: [
            {required: true, message: '游戏类型不能为空', trigger: 'blur',}
          ],
        },
        modify: false,
        modifying: {
          name: '',
          prize: '',
          game: '',
          level: '',
          number: '',
          month: '',
          icon: '',
          score: '',
          cust: '',
          grade: '',
          status:'',
        },
        modifyRules: {
          name: [
            {required: true, message: '奖品名称不能为空', trigger: 'blur'}
          ],
          prize: [
            {required: true, message: '奖品类型不能为空', trigger: 'change', type: 'number'}
          ],
          game: [
            {required: true, message: '游戏类型不能为空', trigger: 'change', type: 'number'}
          ],
          cust: [
            {required: true, message: '用户级别不能为空', trigger: 'change', type: 'number'},
          ],
          status:[
            {required: true, message: '状态不能为空', trigger: 'change', type: 'number'},
          ],
          level: [
            {required: true, message: '兑换条件不能为空', trigger: 'blur'},
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '兑换条件只能为整数', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '奖品显示顺序不能为空', trigger: 'blur'},
            {type: 'string', pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '奖品显示顺序只能为整数', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '券码不能为空', trigger: 'blur'}
          ],
          score: [
            {required: true, message: '分值不能为空', trigger: 'blur'}
          ],
          month: [
            {required: true, message: '所属月份不能为空', trigger: 'blur',type:'date'}
          ],
        },
        loading: true,
        addload: false,
        showing: false,
        picUrl: '',
        show: false,
        hide: false,
        look:false,
        backUrl:'',
      }
    },
    methods: {
      //改变游戏类型显示不同的输入框
      changeShow(value) {
        if (value == 1) {
          this.hide = true;
          this.show = false;
        } else {
          this.show = true;
          this.hide = false;
        }
      },
      //查询
      searching() {
        this.getData();
      },
      //清空
      clear(name) {
        this.$refs[name].resetFields();
        this.getData();
      },
      //修改model开
      change(index) {
        this.modify = true;
        this.showing = true;
        this.look=true;
        console.log(this.lvData[index]);
        if (this.lvData[index].prizeType == 1) {
          this.hide = true;
          this.show = false;
        } else {
          this.show = true;
          this.hide = false;
        }
        this.modifying.name = this.lvData[index].name;
        this.modifying.prize = this.lvData[index].prizeType;
        this.modifying.game = this.lvData[index].gameType;
        this.modifying.level = this.lvData[index].amount;
        this.modifying.number = this.lvData[index].prizeCode;
        this.modifying.score = this.lvData[index].prizeCode;
        this.modifying.month = this.lvData[index].prizeMonth;
        this.modifying.icon = this.lvData[index].imgShow;
        this.modifying.backpack = this.lvData[index].imgPackage;
        this.modifying.cust = this.lvData[index].custType;
        this.modifying.status=this.lvData[index].status;
        this.modifying.grade = this.lvData[index].level,
          this.picUrl = this.lvData[index].imgShow;
          this.backUrl = this.lvData[index].imgPackage;
        sessionStorage.setItem('id', this.lvData[index].id);
      },
      //修改取消
      changeCancel(name) {
        this.modify = false;
        this.$refs[name].resetFields();
        this.showing = false;
        this.look=false;
      },
      //修改确认
      changeConfrim(name) {
        let DateTime = this.modifying.month;
        let month = this.GMTToStr(DateTime);
        let id = sessionStorage.getItem('id');
        if (this.modifying.prize == 1) {
          let data = {
            id: id,
            amount: this.modifying.level,
            gameType: this.modifying.game,
            name: this.modifying.name,
            level: this.modifying.grade,
            prizeCode: this.modifying.score,
            prizeType: this.modifying.prize,
            prizeMonth: month,
            imgShow: this.modifying.icon,
            imgPackage:this.modifying.backpack,
            custType: this.modifying.cust,
            status:this.modifying.status,
          };
          this.$http.post('/prize/update', data)
            .then(res => {
              console.log(res.data);
              this.addload = true;
              if (res.data.status == 200) {
                this.$Message.success(res.data.message);
                this.addload = false;
                this.modify = false;
                this.getData(this.step);
                this.showing = false;
                this.look=false;
              } else {
                this.$Message.error(res.data.errors.msg);
                this.addload = false;
                this.modify = true;
              }
            })
        } else {
          let data = {
            id: id,
            amount: this.modifying.level,
            gameType: this.modifying.game,
            name: this.modifying.name,
            prizeCode: this.modifying.number,
            prizeType: this.modifying.prize,
            prizeMonth: month,
            imgShow: this.modifying.icon,
            imgPackage:this.modifying.backpack,
            level: this.modifying.grade,
            custType: this.modifying.cust,
            status:this.modifying.status,
          };
          this.$http.post('/prize/update', data)
            .then(res => {
              console.log(res.data);
              this.addload = true;
              if (res.data.status == 200) {
                this.$Message.success(res.data.message);
                this.addload = false;
                this.modify = false;
                this.getData(this.step);
                this.showing = false;
                this.look = false;
              } else {
                this.$Message.error(res.data.errors.msg);
                this.addload = false;
                this.modify = true;
              }
            })
        }


      },
      //添加取消
      addCancel(name) {
        this.add = false;
        this.$refs[name].resetFields();
        this.showing = false;
        this.look=false;
      },
      //添加确认
      addConfrim(name) {
        if (this.adding.prize == 1) {
          let data = {
            amount: this.adding.level,
            gameType: this.adding.game,
            name: this.adding.name,
            prizeCode: this.adding.score,
            prizeType: this.adding.prize,
            level: this.adding.grade,
            prizeMonth: this.adding.month,
            imgShow: this.adding.icon,
            imgPackage: this.adding.backpack,
            custType: this.adding.cust,
            status:this.adding.status,
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.addload = true;
              this.$http.post('/prize/add', data)
                .then(res => {
                  if (res.data.status == 200) {
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.add = false;
                    this.getData(this.step);
                    this.showing = false;
                    this.look=false;
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.message);
                    this.addload = false;
                    this.add = true;
                  }
                })
            }
          })
        } else {
          let data = {
            amount: this.adding.level,
            gameType: this.adding.game,
            name: this.adding.name,
            prizeCode: this.adding.number,
            level: this.adding.grade,
            prizeType: this.adding.prize,
            prizeMonth: this.adding.month,
            imgShow: this.adding.icon,
            imgPackage: this.adding.backpack,
            custType: this.adding.cust,
            status:this.adding.status,
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.addload = true;
              this.$http.post('/prize/add', data)
                .then(res => {
                  if (res.data.status == 200) {
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.add = false;
                    this.getData(this.step);
                    this.showing = false;
                    this.look = false;
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.message);
                    this.addload = false;
                    this.add = true;
                  }
                })
            }
          })
        }
      },
      //获取数据
      getData(step) {
        this.step = step;
        let data={
          params: {
            name: this.search.name,
            prizeType: this.search.prize,
            gameType: this.search.game,
            page: this.step,
            size: this.pageSize,
          }
        };
        if(this.search.month!==''){
          data.params.prizeMonth=this.$moment(this.search.month).format('YYYY-MM');
        };
        this.$http.get('/prize/list',data)
          .then(res => {
            console.log(res);
            if (res.data.status === 200) {
              this.lvData = res.data.data.list;
              this.total = res.data.data.total;
              this.loading = false;
            } else {
              this.$Message.error(res.data.message);
              this.loading = false;
            }
          })
      },

      //上传图片回调
      handleSuccess(res, file) {
        console.log(file);
        if (file.response.status == 200) {
          this.adding.icon = file.response.data;
          this.modifying.icon = file.response.data;
          this.showing = true;
          this.picUrl = file.response.data;
          this.$Message.success('上传成功！')
        } else {
          this.$Message.error('上传失败，请重新上传！')
        }

      },
      handleSuccess1(res, file) {
        console.log(file);
        if (file.response.status == 200) {
          this.adding.backpack = file.response.data;
          this.modifying.backpack = file.response.data;
          this.look = true;
          this.backUrl = file.response.data;
          this.$Message.success('上传成功！')
        } else {
          this.$Message.error('上传失败，请重新上传！')
        }

      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确, 请选择JPG或者PNG的图片！'
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: '超过文件大小限制',
          desc: '文件  ' + file.name + ' 不能超过2M！'
        });
      },

      getTime(date) {
        this.adding.month = date;
      },

      GMTToStr(time) {
        let date = new Date(time)
        let Str = date.getFullYear() + '-' +
          (date.getMonth() + 1)
        return Str
      }
    },
    mounted() {
      this.getData();
    },
  }
</script>

<style scoped>

</style>
